<template>
  <scroll-view class="message-wrapper" :scroll-y="true">
    <view class="message-top-view"></view>
    <view v-if="messageExample.length > 0" class="message-list-data background">
      <view
        v-for="(item , pos) in messageExample"
        :key="item"
        :index="pos"
        :item="item"
        class="message-list-data"
        @click="itemClick(pos)"
      >
        <!-- 头像 -->
        <view class="message-image-data">
          <image
            class="message-image-data-header"
            src="http://i1.sinaimg.cn/ent/d/2008-06-04/U105P28T3D2048907F326DT20080604225106.jpg"
          />
        </view>
        <view class="message-list-data-content">
          <view class="message-llist-data-content-title">{{item.title}}</view>
          <view class="message-llist-data-content-subtitle">{{item.content}}</view>
        </view>
      </view>
    </view>
  </scroll-view>
</template>

<script>
export default {
  data() {
    return {
      messageExample: [
        {
          title: "审批",
          content: "陈晓晓的请假申请",
          time: "2020.01.15",
          image: "/static/celestial body_orange.png"
        },
        {
          title: "打卡",
          content: "09:16上班打卡·迟到",
          time: "2020.01.15",
          image: "/static/gongzuotai_baoxiao.png"
        },
        {
          title: "陈晓晓",
          content: "今日工作已完成",
          time: "2020.01.15",
          image: "/static/shouye.png"
        },
        {
          title: "打卡",
          content: "09:16上班打卡·迟到",
          time: "2020.01.15",
          image: "/static/gongzuotai_baoxiao.png"
        },
        {
          title: "陈晓晓",
          content: "今日工作已完成",
          time: "2020.01.15",
          image: "/static/shouye.png"
        },
        {
          title: "打卡",
          content: "09:16上班打卡·迟到",
          time: "2020.01.15",
          image: "/static/gongzuotai_baoxiao.png"
        },
        {
          title: "陈晓晓",
          content: "今日工作已完成",
          time: "2020.01.15",
          image: "/static/shouye.png"
        }
      ],
      isData: false
    };
  },
  methods: {
    itemClick(item) {
      if (item === 1) {
        uni.navigateTo({
          url: "messageClock"
        });
      } else if (item === 0) {
        uni.navigateTo({
          url: "messageApproval"
        });
      }
    }
  }
};
</script>

<style lang="scss">
.message-wrapper {
  background-color: #fafbfb;
}
.message-top-view {
  background-color: #fafbfb;
  height: 12px;
}
.message-list-data {
  background-color: white;
  // height: 78px;
  border-bottom: 0.5px #e8e8e8 solid;
  display: flex;
  &.background {
    display: block;
    margin-top: 0px;
    padding-left: 0px;
    padding-top: 0px;
  }
  .message-image-data {
    margin-left: 22px;
    margin-top: 17px;
    .message-image-data-header {
      margin-top: 0px;
      width: 40px;
      height: 40px;
      border-radius: 20px;
    }
  }
}
.message-list-data-content {
  flex: 1px;
  display: block;
  padding-left: 10px;
  margin-top: 0px;
  //  height: 78px;
  .message-llist-data-content-title {
    padding-top: 17px;
    height: 22px;
    color: #252525;
    font-size: 16px;
  }
  .message-llist-data-content-subtitle {
    padding-top: 8px;
    padding-bottom: 13px;
    color: #9c9c9c;
    font-size: 14px;
  }
}
</style>
